//  列表管理页面：
<template>
  <div>
    <TopNav title="栏目管理" />
    <!-- 激活的列表 -->
    <div class="activeList">
      <h6>点击删除以下频道</h6>
      <div class="list">
        <!-- 遍历的时候，应该把index传进去,index还没有用到的时候，会报错 -->
        <div
          class="item"
          v-for="(item, index) in activeList"
          @click="deactive(index)"
          :key="item.id"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
    <!-- 未激活的列表： -->
    <div class="deactiveList">
      <h6>点击添加以下频道</h6>
      <div class="list">
        <div
          class="item"
          v-for="(item, index) in deactiveList"
          @click="active(index)"
          :key="item.id"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TopNav from "../components/TopNav";
export default {
  components: {
    TopNav,
  },
  data() {
    return {
      activeList: [],
      deactiveList: [],
    };
  },
  //   先都要做监听，无论谁发生变化，都要存进本地储存里：
  watch: {
    activeList() {
      localStorage.setItem("activeList", JSON.stringify(this.activeList));
    },
    deactiveList() {
      localStorage.setItem("deactiveList", JSON.stringify(this.deactiveList));
    },
  },
  created() {
    if (localStorage.getItem("activeList")) {
      this.activeList = JSON.parse(localStorage.getItem("activeList"));
      if (localStorage.getItem("deactiveList")) {
        this.deactiveList = JSON.parse(localStorage.getItem("deactiveList"));
      }
    } else {
      //   这里是发送请求，但是不一定需要：
      this.$axios({
        url: "/category",
      }).then((res) => {
        console.log(res.data);
        this.activeList = res.data.data;
      });
    }
  },
  methods: {
    //   在“已激活的列表”里点击对应的选项：会将该选项禁用
    deactive(index) {
      // 需要先放进“禁用列表里”，再删除：
      //   this.deactiveList.push(this.activeList(index)); 这样的写法是错的！！！！
      this.deactiveList.push(this.activeList[index]);
      // 删掉相应下标开始的一个数：
      this.activeList.splice(index, 1);
    },
    active(index) {
      // 先添加！！再减！！不然直接减了！！就没啦！！
      this.activeList.push(this.deactiveList[index]);
      this.deactiveList.splice(index, 1);
    },
  },
};
</script>

<style lang="less" scoped>
.activeList,
.deactiveList {
  padding: 0 12 / 360 * 100vw;
}
h6 {
  font-weight: 400;
  font-size: 14 / 360 * 100vw;
  color: #888;
  margin: 0 10 / 360 * 100vw;
}
.list {
  display: flex;
  flex-wrap: wrap;
  .item {
    font-size: 16 / 360 * 100vw;
    padding: 6 / 360 * 100vw 12 / 360 * 100vw;
    border: 1px solid #888;
    margin: 12 / 360 * 100vw;
  }
}
</style>